<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07.Vue中的样式</title>
    <script src="./lib/vue-2.6.12.js"></script>
    <style>
        .red {
            color: red;
        }

        .thin {
            font-weight: 200;
        }

        .italic {
            font-style: italic;
        }

        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2 class="red thin italic">这是一个H2，演示vue中的class样式控制！！！</h2>
        <!-- 绑定类名数组 -->
        <h2 :class="['red', 'thin', 'active']">这是一个H2，演示vue中的class样式控制！！！</h2>
        <!-- 类对象名，可以方便的控制样式的有无 -->
        <h2 :class="classObj1">这是一个H2，演示vue中的class样式控制！！！</h2>
        <h2 :class="[classObj1, classObj2]">这是一个H2，演示vue中的class样式控制！！！</h2>
        <hr>
        
        <h3 style="color: red; font-weight: 200;">这是一个H3，演示vue中的style样式控制！！</h3>
        <!-- 绑定样式对象（多个样式-值） -->
        <h3 :style="{color: 'red', 'font-weight': 200}">这是一个H3，演示vue中的style样式控制！！</h3>
        <!-- 样式对象名 -->
        <h3 :style="styleObj1">这是一个H3，演示vue中的style样式控制！！</h3>
        <h3 :style="[styleObj1, styleObj2]">这是一个H3，演示vue中的style样式控制！！</h3>
    </div>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                // 可以方便的控制某样式的有无
                classObj1: { red: true, thin: true, italic: true },
                classObj2: { active: true },
                styleObj1: { color: 'red', 'font-weight': 200, 'font-style': 'italic' },
                styleObj2: { 'letter-spacing': '0.5em' }
            }
        })        
    </script>
</body>

</html>